<template>
  <div>
      <!-- 搜索框 -->
      <van-search
    v-model="value"
    show-action
    :placeholder="placeholderValue"
    @search="onSearch"
    @cancel="onCancel"
    @input="onInput"
  />
   <!-- 历史记录和热门搜索 -->
   <History v-if="flag==1" :historyArr="historyArr" :hottArr="hottArr"
     @transfer="getKeyword"
     @transfer1="getKeyword1"
   ></History>
   <!-- 实时搜索 -->
   <searchList v-else-if="flag==2" :inputArr="inputArr"
   @inputOn="inputOn"
    ></searchList>
   <!-- 商品列表 -->
   <GoodList  v-else 
   :filterCategory="filterCategory" 
   :goodsList="goodsList"
   @sortEvent="sortEvent"
   @categoryEvent="categoryEvent"
   
   ></GoodList>
      

  </div>
</template>

<script>
//引入从后端获取数据的接口
import {getSearchApi,getInputApi,getGoodListApi} from "@/utils/https.js"


import History from "@/components/HistoryAndHot.vue"
import searchList from "@/components/SearchList.vue"
import GoodList from "@/components/Goodlist.vue"

export default {
    //           历史搜索和热门搜索,实时搜索
    components:{History,searchList,GoodList},
    data() {
            return {
              flag:1,
              value: '',
              placeholderValue:"",
              historyArr:[],
              hottArr:[],
              inputArr:[],//实时搜索的数组
              info:{//搜索出商品信息需要传的参数
                    keyword:"",page:1,size:20,order:"desc",categoryId:0,sort:"id"
                   },
              goodsList:[],//搜索出来的商品数据
              filterCategory:[],//分类数据
              n:false
            };
           },
  created(){
    getSearchApi().then(res=>{
        console.log(res)
            if(res.errno==0){
                 this.placeholderValue=res.data.defaultKeyword.keyword
                 this.historyArr=res.data.historyKeywordList
                 this.hottArr=res.data.hotKeywordList
            }
    })
  },
  
  methods: {
    //点击回车
    onSearch(val) {
      // this.$toast(val);
        this.flag=3
        this.info.keyword=val
        //获取数据
        getGoodListApi(this.info).then(res=>{
          console.log(res)
          if(res.errno==0){
             this.goodsList=res.data.goodsList;
      //将后端数据中的name和id字段修改成text和value字段
    let str= JSON.stringify(res.data.filterCategory)
            .replace(/name/g,"text")
            .replace(/id/g,"value")
             this.filterCategory=JSON.parse(str);
             
      
      }
      
          
          })

    },
    //取消事件
    onCancel() {
         this.$toast('取消');
         this.$router.push("/home");
    },
    //子组件传过来
    getKeyword(m){
        this.value=m
    },
    getKeyword1(m){
        this.value=m
    },


    
    inputOn(m){
       this.value=m
    },
    //实时搜索的事件
    onInput(val){//val自动接受的就是输入框输入的内容
       console.log(val)
       this.flag=2//证明即将要显示实时搜索那个页面
    //    获取后端实时搜索的数据
          getInputApi({keyword:val}).then(res=>{
             this.inputArr=res.data
            
          })
    },
    //排序事件
    sortEvent(m){
        this.info.order=m
        this.info.sort="price"
        this.onSearch()
    },
    //分类事件
    categoryEvent(m){
        this.info.categoryId=m
        this.info.sort="id"
        this.onSearch()
    }

  },
}
</script>

<style>

</style>